<template>
<div class="article-container">
    <h3 v-color="'red'">测试全局自定义指令</h3>
  <div class="header-box">
    <slot name="header"></slot>
  </div>
    <div class="content-box">
<!--        在封装组件时，为预留的<slot>提供属性对应的值，这种用法，叫作用域插槽-->
      <slot name="content" msg="hello world" :user="userinfo"></slot>
    </div>
    <div class="footer-box">
      <slot name="footer"></slot>
    </div>
</div>
</template>

<script>
export default {
    name: "Article",
    data() {
        return {
            userinfo: {
                username: 'zs',
                age: 15
            }
        }
    }
}
</script>

<style lang="less" scoped>
  .article-container {
    >div {
      min-height: 150px;
    }
    .header-box {
        background-color: pink;
    }
    .content-box {
      background-color: aqua;
    }
    .footer-box {
      background-color: chartreuse;
    }
  }
</style>